import React, { Component } from 'react'
import { withRouter, Link, Switch, Route, HashRouter as Router } from 'react-router-dom'
import { Timeline, Pagination, LocaleProvider } from 'antd';
import zh_CN from 'antd/lib/locale-provider/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';
import u from '../../../common.js'
import GzDetail from './gzDetail'
import $ from 'jquery'
import '../../../static/routineMonitoring/gongzhong.less'
moment.locale('zh-cn');

class Gongzhong extends Component {
  constructor(props) {
    super(props)
    this.state = {
      qunList: [],
      qunListDetail: [],
      keyWordList: [],//右侧关键词
      type: '0',
      startTime: '',
      endTime: '',
      colorFlag: false,
      colorFlag2: false,
      zhazhaoIf: false,
      gongzhongList: [],
      filter: [],//过滤后的公众号
      showDetail: [],//公众号信息
      target: null,//当前展示的公众号
      total: null,//当前公众号显示条数
      selectChangeColor: null,
      keyWordName: '',//右侧搜索的关键词
      gongzhongName: '',//左侧搜索公众号
      wordFlag: false,//左侧搜索显示
      wordFlag2: false,//右侧搜索显示
      choseDate: 10,//全部、近日
      warningTotal: null,//公众号预警条数
      publicTotal: null,//当前公众号总条数
      page: 1,//加载更多传值
      scrollTopLength: null,
      scrollMax: "",
      scrollFlag: true
    }
  }
  componentDidMount() {
    u.selectWord(data => {
      if (!data) return
      this.setState({
        keyWordList: data.data
      }, () => {
        let keyWordList = []
        this.state.keyWordList.map((item, index) => {
          keyWordList.push(item.name)
        })
        localStorage.setItem('searchKey', keyWordList.toString())
      })

    })
    this.publickList()//公众号
    u.queryList({
      page: 1,
      // size: 10000,
      size: 10,
      sortField: "addTime",
      sortType: "DESC",
      source: this.state.target,
      webSiteType: '14',
      isWechatKeyWord: true,
      startTime: "",
      endTime: "",
      isWechatUserKeyWord: "0",
      keyWord: '',//用渲染的预警关键词
    }, data => {
      this.setState({
        showDetail: data.data,
        //warningTotal:data.total,
        total: data.total,
        publicTotal: data.publicTotalCount,
      }, () => {
        localStorage.setItem('warningTotal', this.state.warningTotal)//存储预警条数
        this.getScorll()
      })
    })
  }
  onChoseTime(num) {
    let endTime = u.getDate(0, true)
    let startTime = u.getDate(num, false)
    this.setState({
      startTime: num === 10 ? '' : startTime,
      endTime: num === 10 ? '' : endTime,
      choseDate: num,
    }, () => {
      this.showList(this.state.keyWordName)
      if (num === 10) {

        this.publickList()
      }
      else if (num === 0) {
        let total = this.state.total
        this.setState({
          //warningTotal:total ,
        }, () => {
        })
        this.publickList()
      }
      else if (num === 3) {
        let total = this.state.total
        this.setState({
          //warningTotal:total ,
        })
        this.publickList()
      }
      else if (num === 7) {
        let total = this.state.total
        this.setState({
          // warningTotal:total ,
        })
        this.publickList()
      }
    })
  }
  publickList() {
    u.publickListAll({
      webSiteType: '14',
      aggsType: "terms",
      aggsField: "source",
      startTime: this.state.startTime,
      endTime: this.state.endTime,
    }, data => {
      if (!data) return
      this.setState({
        gongzhongList: data,
        filter: data,
        warningTotal: data[data.length - 1].publicWarning
      })
    })
  }
  onMouseMove(flag) {
    this.setState({
      colorFlag: !this.state.colorFlag
    })
  }

  onMouseMove2(flag) {
    this.setState({
      colorFlag2: !this.state.colorFlag2
    })
  }

  blockContent(val) {
    this.setState({
      gongzhongName: val
    }, () => {
      let wordLength = this.state.gongzhongName.trim()
      if (wordLength.length > 0) {
        this.setState({
          wordFlag: true
        })
      } else {
        this.setState({
          wordFlag: false
        })
      }
    })
    this.setState((prevState, props) => ({
      filter: this.state.gongzhongList.filter((item) => {
        if (item.key) {
          return item.key.includes(val)
        } else {
          this.state.gongzhongList
        }
      })
    }))

  }
  showList(val, index) {
    this.setState({
      selectChangeColor: index
    })
    u.queryList({
      page: this.state.page,
      size: 10,
      sortField: "addTime",
      sortType: "DESC",
      source: val,
      webSiteType: '14',
      isWechatKeyWord: true,
      startTime: this.state.startTime,
      endTime: this.state.endTime,
      isWechatUserKeyWord: "0",
      // keyWord:this.state.keyWordName,
      keyWord: '',
    }, data => {
      this.setState({
        showDetail: data.data,
        target: val,
        total: data.total,
        publicTotal: data.publicTotalCount,
        //warningTotal:data.total,
      })
    })
  }

  //跳转
  goRouter(d) {
    this.props.history.push(d)
  };
  //搜索关键词
  onSearchWord() {
    u.queryList({
      page: 1,
      size: 10000,
      sortField: "addTime",
      sortType: "DESC",
      source: this.state.target,
      webSiteType: '14',
      isWechatKeyWord: true,
      startTime: "",
      endTime: "",
      isWechatUserKeyWord: "1",//关键词传1
      keyWord: this.state.keyWordName,
    }, data => {
      this.setState({
        showDetail: data.data,
        //  keyWordName:'',//每次查询后将关键词置空
        total: data.total,
        publicTotal: data.publicTotalCount,
      })
    })
  }
  //置空
  clear() {
    $('#gongzhong').val('')
    this.setState({
      wordFlag: false,
      gongzhongName: '',
    })
    this.publickList()
  }
  clear2() {
    $('#keyword').val('');
    this.setState({
      wordFlag2: false,
    })
    this.showList()
  }
  //类名点击公众号预警
  change() {
    this.setState({
      selectChangeColor: null
    })
    u.queryList({
      page: 1,
      // size: 10000,
      size: 10,
      sortField: "addTime",
      sortType: "DESC",
      source: null,
      webSiteType: '14',
      isWechatKeyWord: true,
      startTime: "",
      endTime: "",
      isWechatUserKeyWord: "0",
      keyWord: '',//用渲染的预警关键词
    }, data => {
      this.setState({
        showDetail: data.data,
        warningTotal: data.total,
        target: null,
        total: data.total,
        publicTotal: data.publicTotalCount,
      })
    })
  }
  //右侧搜索关键词取值
  getKeyname(val) {
    let wordLength = this.state.keyWordName.trim()
    if (wordLength.length > 0) {
      this.setState({
        wordFlag2: true
      })
    } else {
      this.setState({
        wordFlag2: false
      })
    }
    this.setState({
      keyWordName: val,
      wordFlag2: val && val.trim() ? true : false
    })
  }
  //点击加载更多
  loadMore() {
    this.setState((prevState, props) => ({
      page: this.state.page + 1,
      scrollFlag: false
    }), () => {
      u.queryList({
        page: this.state.page,
        // size: 10000,
        size: 10,
        sortField: "addTime",
        sortType: "DESC",
        source: this.state.target,
        webSiteType: '14',
        isWechatKeyWord: true,
        startTime: "",
        endTime: "",
        isWechatUserKeyWord: "0",
        keyWord: '',//用渲染的预警关键词
      }, data => {
        let list = data.data;
        let arr = this.state.showDetail.slice(0).concat(list);
        this.setState((prevState, props) => ({
          showDetail: arr,
        }), () => {
          this.getScorll()
        })
      })
    })

  }

  //回到顶部
  goTop() {
    let bigBox = document.querySelector('.yujingDetail');
    bigBox.scrollTop = 0
  }
  getScorll() {
    setTimeout(() => {
      let bigBoxH = document.querySelector('.yujingDetail').offsetHeight;
      let bigBoxulH = document.querySelector('.yujingDetail>ul').offsetHeight;
      this.setState((props, prevState) => ({
        scrollMax: bigBoxulH - bigBoxH,
        scrollFlag: true
      }))
    }, 200)

  }
  onDingWei2(e) {
    if (Math.abs(e.target.scrollTop - this.state.scrollMax) <= 20 && this.state.scrollFlag) {
      this.loadMore()

    }

  }
  render() {
    return (
      <div className="wechat">
        <div className='wechatBox leftstyle'>
          <div className="searchBox">
            <img className="searchStyle" src={require("../../../static/image/seacrchh.png")} onClick={() => { this.blockContent(this.state.gongzhongName) }} />
            <input className={this.state.colorFlag ? 'inputStyle hover' : 'inputStyle'} id='gongzhong'
              onFocus={this.onMouseMove.bind(this, true)}
              onBlur={this.onMouseMove.bind(this, false)}
              type="text"
              onKeyUp={(e) => { this.blockContent(e.target.value) }}
              placeholder="搜索公众号…" />
            {/* <img className="cancelStyle" src={require("../../../static/image/cancel.png") }/> */}
            {
              this.state.wordFlag == true ?
                <img className="cancelStyle" src={require("../../../static/image/cancel.png")} onClick={() => { this.clear() }} />
                : ''
            }
          </div>
          <div className='leftContent'>
            <div className={this.state.selectChangeColor == null ? 'yujingtishi selectStyle' : 'noSelect'} onClick={() => { this.change() }}>
              <div className='tishi_left'>
                <img src={require('../../../static/image/jinggao_03.png')} />
              </div>
              <div className='tishi_right'>
                <div className='right_top'>公众号预警({this.state.warningTotal ? this.state.warningTotal : 0})</div>
                <div>重点人/组织检测总览</div>
              </div>
            </div>

            {
              this.state.filter.length > 1 && this.state.filter.map((item, index) => {
                return (
                  <div key={index} onClick={this.showList.bind(this, item.key, index)} className={this.state.selectChangeColor === index ? 'listDetail selectStyle' : 'listDetail'}>
                    <div className='listPic'>
                      <img src={require('../../../static/image/publicPic.png')} />
                    </div>
                    <div className='listContent'>
                      {/* <div className='listTop'>{item.key}<span>({item.count})</span></div> */}
                      <div className='listTop'
                        dangerouslySetInnerHTML={{ __html: (item.key + '').replace(this.state.gongzhongName, '<span style="color:#5287ff!important;">' + this.state.gongzhongName + '</span>') }}>
                      </div>
                      <span>({item.count})</span>
                      {/* <div className='listButton'>
                      <span>微信号:abc123456789</span>
                    </div> */}
                    </div>
                  </div>
                )
              }) || ''
            }
          </div>
        </div>
        <div className='wechatBox middle'>
          <div className='title'>
            <div className="title_left">{this.state.selectChangeColor == null ? '公众号预警' : this.state.target + '公众号'}<span>{this.state.total ? this.state.total : 0}</span><span>/{this.state.publicTotal ? this.state.publicTotal : 0}</span></div>
            <div className="title_right">
              <div className="right_postion">
                <img className="searchStyle" src={require("../../../static/image/search.png")} onClick={() => { this.onSearchWord(this.state.keyWordName) }} />
                <input className={this.state.colorFlag2 ? 'inputStyle hover' : 'inputStyle'} id='keyword'
                  onFocus={this.onMouseMove2.bind(this, true)}
                  onBlur={this.onMouseMove2.bind(this, false)}
                  type="text" placeholder="搜索关键词…"
                  onKeyUp={(e) => { this.getKeyname(e.target.value) }}
                />
                {
                  this.state.wordFlag2 == true ?
                    <img className="cancelStyle" src={require("../../../static/image/cancel.png")} onClick={() => { this.clear2() }} />
                    : ''
                }
              </div>
            </div>
          </div>
          {/* 回到顶部 */}
          <div className='zhezhao'>
            {this.state.scrollTopLength >= 300 ? <img className='imgStyle2' src={require('../../../static/image/retract.png')} onClick={this.goTop.bind(this)} /> : ''}

          </div>
          <div className='yujingDetail' onScroll={(e) => { this.onDingWei2(e) }}>
            {
              this.state.showDetail.length !== 0 ?
                <Timeline>
                  {
                    this.state.showDetail.map((item, index) => {
                      return (
                        <Timeline.Item key={index}><span className='detailTimeStyle'>{u.unixTime(Number(item.addTime))}</span>
                          <div className='itemList'>
                            <div className='detailList' >
                              <div className='toDetail' onClick={() => { this.goRouter("/gzDetail?" + item.id) }}>
                                <img className='detailPic' src={require('../../../static/image/gongzhong1.png')} alt="" />
                                <div className='detailTitle'>
                                  <span dangerouslySetInnerHTML={{ __html: item.title }}></span>
                                </div>
                                <div className='detailArrow'>
                                  <span>详情</span>
                                  <img src={require('../../../static/image/rightArr.png')} alt="" />
                                </div>
                              </div>

                            </div>
                          </div>
                        </Timeline.Item>
                      )
                    })
                  }
                  

                </Timeline> :
                <div className='nothing'>
                  <div className='nothing_pos'>
                    <div>
                      <img src={require('../../../static/image/nothing.png')} />
                    </div>
                    <div className='zhanwuneirong'>暂无内容</div>
                  </div>
                </div>
            }
            {/* <div ><span>加载中>></span></div> */}
          </div>
        </div>
        <div className='wechatBox right'>
          <div className='title'>筛选信息</div>
          <div className='yujingBox1'>
            <div className='yujingKeyWrod'>预警关键词</div>
            <div className='keyWord'>
              {
                this.state.keyWordList.map((item, index) => {
                  return (
                    <div key={index}>
                      {item.name}
                    </div>
                  )
                })
              }
            </div>
          </div>
          <div className="timeStyle">时间</div>
          <div className="timeKeyWord">
            <div onClick={this.onChoseTime.bind(this, 10)}
              className={this.state.choseDate === 10 ? 'allKeyWord' : 'keyWordTime'}>全部</div>
            <div onClick={this.onChoseTime.bind(this, 0)}
              className={this.state.choseDate === 0 ? 'allKeyWord' : 'keyWordTime'}>近一日</div>
            <div onClick={this.onChoseTime.bind(this, 3)}
              className={this.state.choseDate === 3 ? 'allKeyWord' : 'keyWordTime'}>近三日</div>
            <div onClick={this.onChoseTime.bind(this, 7)}
              className={this.state.choseDate === 7 ? 'allKeyWord' : 'keyWordTime'}>近一周</div>

          </div>
        </div>

      </div>
    )
  }
}

export default Gongzhong